import Vue from 'vue'
import Router from 'vue-router'

// import Login from './components/Login.vue'
const Login = () => import(/* webpackChunkName: "login_home_welcome" */ './components/Login.vue')
// import Home from './components/Home.vue'
const Home = () => import(/* webpackChunkName: "login_home_welcome" */ './components/Home.vue')
// import Welcome from './components/Welcome.vue'
const Welcome = () => import(/* webpackChunkName: "login_home_welcome" */ './components/Welcome.vue')
// 用户列表
const UserList = () => import(/* webpackChunkName: "User" */ './components/task/user-list.vue')
// 任务模块
const TaskList = () => import(/* webpackChunkName: "Task" */ './components/task/list.vue')
const TaskSave = () => import(/* webpackChunkName: "Task" */ './components/task/save.vue')
const TaskDetail = () => import(/* webpackChunkName: "Task" */ './components/task/detail.vue')
const TaskUpdate = () => import(/* webpackChunkName: "Task" */ './components/task/update.vue')
// 项目模块
const ProjectList = () => import(/* webpackChunkName: "Project" */ './components/project/list.vue')
const ProjectSave = () => import(/* webpackChunkName: "Project" */ './components/project/save.vue')
const ProjectDetail = () => import(/* webpackChunkName: "Project" */ './components/project/detail.vue')
const ProjectUpdate = () => import(/* webpackChunkName: "Project" */ './components/project/update.vue')
// 组件
const quillEditor = () => import(/* webpackChunkName: "Task" */ './components/common/quill-editor.vue')


Vue.use(Router)

const router = new Router({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login },
    {
      path: '/home',
      component: Home,
      redirect: '/welcome',
      children: [
        { path: '/welcome', name: 'welcome', component: Welcome },
        { 
          path: '/project-list', 
          name: 'project-list', 
          component: ProjectList,
          children: [
            { path: '/project-detail', name: 'project-detail', component: ProjectDetail },
            { path: '/project-save', name: 'project-save', component: ProjectSave },
            { path: '/project-update', name: 'project-update', component: ProjectUpdate }
          ]
        },
        { 
          path: '/task-list', 
          name: 'task-list', 
          component: TaskList,
          children: [
            { path: '/task-detail', name: 'task-detail', component: TaskDetail },
            { path: '/task-save', name: 'task-save', component: TaskSave },
            { path: '/task-update', name: 'task-update', component: TaskUpdate }
          ]
        },
        { 
          path: '/user-list', 
          name: 'user-list', 
          component: UserList,
          children: []
        },
        { path: '/quill-editor', name: 'quill-editor', component: quillEditor }
      ]
    }
  ]
})

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
  // to 将要访问的路径
  // from 代表从哪个路径跳转而来
  // next 是一个函数，表示放行
  //     next()  放行    next('/login')  强制跳转
  const tokenStr = localStorage.getItem('task_token')
  if (!tokenStr) {
    if (to.path === '/login') { // 未登录且已经在Login页了，直接放行
      return next()
    }

    return next('/login')
  }

  if (to.path === '/login') {
    return next('/home')
  }
  next()
})

export default router
